<template>
  <div class="personal-info">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>个人信息</span>
        </div>
      </template>
      <el-form ref="infoForm" :model="userInfo" :rules="rules" label-width="120px">
        <el-form-item label="头像" prop="tx">
          <div class="avatar-container">
            <el-avatar :src="userInfo.tx || defaultAvatar" size="large"></el-avatar>
            <el-button type="primary" @click="uploadAvatar" style="margin-left: 10px;">上传头像</el-button>
            <input ref="avatarInput" type="file" accept="image/*" style="display: none;" @change="handleAvatarChange">
          </div>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" placeholder="请输入用户名" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userInfo.password" type="password" placeholder="请输入密码" maxlength="100" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="userInfo.tel" placeholder="请输入手机号" maxlength="11" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { put } from '@/http/http';

export default {
  name: 'PersonalInfo',
  mounted(){
    this.userInfo = JSON.parse(sessionStorage.getItem('admin'));
  },
  setup() {
    const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64360288247c8d4721eapng.png' // 默认头像
    const userInfo = ref({
      id: 0,
      username: '',
      password: '',
      tx: '',
      tel: ''
    })

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
      ],
      tel: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
      ]
    }

    const infoForm = ref(null)

    const submitForm =  () => {

      infoForm.value.validate(async (valid) => {
        if (valid) {
          // 这里添加保存用户信息的逻辑
          await put(`/hqy/admin/${userInfo.value.id}`, userInfo.value);
          alert('保存成功');
        } else {
          ElMessage.error('表单验证失败')
          return false
        }
      })
    }

    const resetForm = () => {
      infoForm.value.resetFields()
    }

    const uploadAvatar = () => {
      // 在 setup 中不能使用 this，直接使用 ref
      avatarInput.value.click()
    }

    const avatarInput = ref(null)

    const handleAvatarChange = (e) => {
      const file = e.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (event) => {
          userInfo.value.tx = event.target.result
        }
        reader.readAsDataURL(file)
      }
    }

    return {
      defaultAvatar,
      userInfo,
      rules,
      infoForm,
      avatarInput,
      submitForm,
      resetForm,
      uploadAvatar,
      handleAvatarChange
    }
  }
}
</script>

<style scoped>
.avatar-container {
  display: flex;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.box-card {
  margin-top: 20px;
}
</style>